<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XR字幕系统测试</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', serif;
            background-color: #f0f0f0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            margin-bottom: 20px;
        }
        .controls {
            margin-bottom: 30px;
        }
        input[type="text"] {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007aff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #0051d5;
        }
        .canvas-preview {
            margin-top: 30px;
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
        .preview-title {
            font-weight: bold;
            margin-bottom: 10px;
        }
        #canvas-preview {
            max-width: 100%;
            border: 1px solid #ddd;
            background-color: white;
        }
        .status {
            margin-top: 20px;
            padding: 10px;
            background-color: #e0f7fa;
            border-radius: 5px;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>XR字幕系统测试</h1>
        
        <div class="controls">
            <input type="text" id="subtitle-text" placeholder="输入要显示的字幕文本..." value="欢迎使用XR字幕系统！这是一个测试。">
            <button id="show-btn">显示字幕</button>
            <button id="hide-btn">隐藏字幕</button>
            <button id="test-wrap-btn">测试自动换行</button>
        </div>
        
        <div class="canvas-preview">
            <div class="preview-title">Canvas渲染预览：</div>
            <canvas id="canvas-preview" width="1024" height="128"></canvas>
        </div>
        
        <div class="status" id="status">准备就绪</div>
    </div>

    <!-- 导入字幕系统模块 -->
    <script type="module">
        // 导入字幕系统模块
        import xrSubtitleSystem from './js/subtitles/XRSubtitleSystem.js';
        import canvasRenderer from './js/subtitles/CanvasRenderer.js';
        
        // 初始化状态显示
        const statusEl = document.getElementById('status');
        const updateStatus = (message) => {
            statusEl.textContent = message;
            console.log(message);
        };
        
        // 获取DOM元素
        const subtitleTextEl = document.getElementById('subtitle-text');
        const showBtn = document.getElementById('show-btn');
        const hideBtn = document.getElementById('hide-btn');
        const testWrapBtn = document.getElementById('test-wrap-btn');
        const canvasPreviewEl = document.getElementById('canvas-preview');
        
        // 复制渲染器的Canvas到预览元素
        const syncCanvasPreview = () => {
            const sourceCanvas = canvasRenderer.getCanvas();
            const ctx = canvasPreviewEl.getContext('2d');
            ctx.clearRect(0, 0, canvasPreviewEl.width, canvasPreviewEl.height);
            ctx.drawImage(sourceCanvas, 0, 0, canvasPreviewEl.width, canvasPreviewEl.height);
        };
        
        // 显示字幕按钮
        showBtn.addEventListener('click', () => {
            const text = subtitleTextEl.value;
            xrSubtitleSystem.showText(text);
            updateStatus(`已显示字幕: "${text}"`);
            syncCanvasPreview();
        });
        
        // 隐藏字幕按钮
        hideBtn.addEventListener('click', () => {
            xrSubtitleSystem.hide();
            updateStatus('字幕已隐藏');
            syncCanvasPreview();
        });
        
        // 测试自动换行按钮
        testWrapBtn.addEventListener('click', () => {
            const longText = "这是一段很长的文本，用于测试字幕系统的自动换行功能。自动换行应该能够根据Canvas的宽度和字体大小，将过长的文本分成多行显示，最多显示两行内容。";
            subtitleTextEl.value = longText;
            xrSubtitleSystem.showText(longText);
            updateStatus('测试自动换行完成');
            syncCanvasPreview();
        });
        
        // 尝试简单初始化（不依赖Three.js和XR环境）
        try {
            // 只初始化基础功能
            canvasRenderer.setTexturePlaneManager(null);
            
            // 初始渲染测试
            xrSubtitleSystem.showText("XR字幕系统测试初始化完成！");
            updateStatus('字幕系统初始化完成');
            setTimeout(() => {
                syncCanvasPreview();
            }, 100);
        } catch (error) {
            updateStatus(`初始化错误: ${error.message}`);
            console.error('测试初始化失败:', error);
        }
    </script>
</body>
</html>